import React from 'react'
import MobileHeader from './mobile_header';
import MobileFooter from './mobile_footer';
import MobileList from './mobile_list'
import { Layout, Tabs, Carousel, Row } from 'antd';

const TabPane = Tabs.TabPane;

function MobileIndex() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    autoplay: true
  }
  return (
    <Layout>
      <MobileHeader />
      <Tabs>
        <TabPane tab='头条' key='1'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='top' count={20}></MobileList>
        </TabPane>
        <TabPane tab='社会' key='2'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='shehui' count={20}></MobileList>
        </TabPane>
        <TabPane tab='国内' key='3'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='guonei' count={20}></MobileList>
        </TabPane>
        <TabPane tab='国际' key='4'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='guoji' count={20}></MobileList>
        </TabPane>
        <TabPane tab='娱乐' key='5'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='yule' count={20}></MobileList>
        </TabPane>
        <TabPane tab='体育' key='6'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='tiyu' count={20}></MobileList>
        </TabPane>
        <TabPane tab='科技' key='7'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='keji' count={20}></MobileList>
        </TabPane>
        <TabPane tab='时尚' key='8'>
          <Row>
            <div className='mb__carousel'>
              <Carousel {...settings}>
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/48eb29eb68cd4b5797b70c47a253d230.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
                <img src="https://cms-bucket.nosdn.127.net/2018/11/15/55812b4c82084beeafe310c0b8ebb93a.jpeg?imageView&thumbnail=600y250" alt='' className='pc__container__carousel__img' />
              </Carousel>
            </div>
          </Row>
          <MobileList type='shishang' count={20}></MobileList>
        </TabPane>
      </Tabs>
      <MobileFooter />
    </Layout>
  )
}

export default MobileIndex